<template>
	<el-dialog v-model="props.show" title="在线导入设备" width="1000" @close="closeForm(formRef)">
		<el-steps :active="formData.stepActive" finish-status="success" align-center>
			<el-step title="配置数据库" />
			<el-step title="导入设备" />
		</el-steps>
		<!-- 配置数据库 -->
		<el-form class="mt-4" label-width="auto" v-show="formData.stepActive==0"
			:model="dbSettingData.data">
			<el-form-item label="host" prop="host">
				<el-input v-model="dbSettingData.data.host" />
			</el-form-item>
			<el-form-item label="user" prop="user">
				<el-input v-model="dbSettingData.data.user" />
			</el-form-item>
			<el-form-item label="password" prop="password">
				<el-input v-model="dbSettingData.data.password" />
			</el-form-item>
			<el-form-item label="database" prop="database">
				<el-input v-model="dbSettingData.data.database" />
			</el-form-item>
			<div class="text-right"><el-button @click="checkDnConn()" :loading = "dbSettingData.connecting">测试连接</el-button></div>
		</el-form>
		<!-- 导入设备 -->
		<div v-show="formData.stepActive==1">
			<el-form class="mt-4" label-width="auto" ref="formRef" :model="formData.data"
				:rules="formRules">
				<el-row>
					<el-col :span="8">
						<el-form-item label="ProductKey" prop="pk">
							<el-input v-model="formData.data.pk" />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="DeviceName" prop="dn">
							<el-input v-model="formData.data.dn" />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="设备cgid" prop="cgid">
							<el-input v-model="formData.data.cgid" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="商家id" prop="merchantId">
							<el-input v-model="formData.data.merchantId" />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="门店id" prop="sotreId">
							<el-input v-model="formData.data.sotreId" />
						</el-form-item>
					</el-col>
					<el-col :span="8" class="text-right mt-2">
						<el-button-group>
							<el-button type="primary" @click="queryDevice(formRef)">查询</el-button>
							<el-button type="primary" @click="clearForm(formRef)">清空</el-button>
						</el-button-group>
					</el-col>
				</el-row>
				<el-row>
					
				</el-row>
			</el-form>
			<div class="text-center">
				<el-transfer 
				v-model="formData.selectedData" 
				:titles="['搜索到的设备', '导入的设备']" 
				:props="{
				  key: 'cgid',
				  label: 'dn',
				}"
				:data="formData.queryRetData" />
			</div>
		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="closeOnlineImportDeviceForm(formRef)">取消</el-button>
				<el-button v-show="formData.stepActive==0" @click="formData.stepActive++">下一步</el-button>
				<el-button v-show="formData.stepActive!=0" @click="formData.stepActive--">上一步</el-button>
				<el-button v-show="formData.stepActive==1" type="primary" @click="onlineImportDevice()">提交</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { defineProps, reactive, ref, onMounted} from 'vue'
import { checkDbConnApi, queryDeviceApi} from '@/api/iotApi'
//组件参数
const props = defineProps(['show'])
const emit = defineEmits(['submit','close'])
// 在线导入设备表单
const formRef = ref()
const formRules = reactive({
  pk: [
	{ required: true, message: '请输入ProductKey', trigger: 'blur' },
	{ min: 11, max: 11, message: '格式不正确', trigger: 'blur' }
  ],
  merchantId: [
	{ required: true, message: '请输入商家id', trigger: 'blur' }
  ]
})

onMounted(() => {
	//数据库连接配置
	const storedDbSetting = localStorage.getItem('dbSetting');
	if (storedDbSetting) {
		dbSettingData.data = JSON.parse(storedDbSetting)
		formData.stepActive = 1
	}
})


const formData = reactive({
	showDialog: false,
	data: {},
	stepActive : 0,
	//穿梭框选中值
	selectedData: [],
	//穿梭框数据源
	queryRetData: []
})

// 数据库配置
const dbSettingData = reactive({
	data: {},
	connecting: false
})


//测试数据库连接
const checkDnConn = ()=>{
	dbSettingData.connecting = true
	checkDbConnApi(dbSettingData.data).then(ret=> {
		if (ret.status == 200) {
			if (!ret.data.data) {
				ElMessage.error(ret.data.message)
			} else {
				ElMessage({message: ret.data.message, type: 'success'})
				//缓存配置
				localStorage.setItem('dbSetting', JSON.stringify(dbSettingData.data))
			}
		}
	}).catch(error=>{
		
	}).finally(()=>{
		dbSettingData.connecting = false
	})
}

//查询设备列表
const queryDevice = (formEl)=>{
	if (!formEl) return
	formEl.validate((valid, fields) => {
		if (valid) {
			queryDeviceApi(dbSettingData.data, formData.data).then(ret=> {
				if (ret.status == 200) {
					if (!ret.data.data) {
						ElMessage.error(ret.data.message)
					} else {
						formData.queryRetData = ret.data.data
					}
				}
			})
		} else {
		  console.log('error submit!', fields)
		}
	})
}

//在线导入设备
const onlineImportDevice = ()=>{
	if (formData.selectedData.length > 0) {
		let selectedDeviceList = formData.queryRetData.filter(item => formData.selectedData.includes(item.cgid))
		emit('submit', selectedDeviceList)
	}
}

//关闭在线导入
const closeForm = (formEl)=>{
	if (!formEl) return
	formEl.resetFields()
	//关闭输入框
	emit('close')
}

//清空表单
const clearForm = (formEl) => {
	if (!formEl) return
	formEl.resetFields()
	formData.queryRetData = []
	formData.selectedData = []
}
</script>

<style>
</style>